<template>
    <canvas ref="canvas" class="bg-canvas"></canvas>
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  
  const canvas = ref(null);
  
  onMounted(() => {
    const ctx = canvas.value.getContext('2d');
    canvas.value.width = window.innerWidth;
    canvas.value.height = window.innerHeight;
  
    const particles = [];
  
    function createParticle() {
      return {
        x: Math.random() * canvas.value.width,
        y: Math.random() * canvas.value.height,
        velocityX: Math.random() * 2 - 1,
        velocityY: Math.random() * 2 - 1,
        size: Math.random() * 3 + 1,
        color: `rgba(${Math.random() * 255},${Math.random() * 255},${Math.random() * 255},${Math.random() * 0.7})`,
      };
    }
  
    for (let i = 0; i < 100; i++) {
      particles.push(createParticle());
    }
  
    function draw() {
      ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);
  
      particles.forEach((particle, index) => {
        ctx.beginPath();
        ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
        ctx.fillStyle = particle.color;
        ctx.fill();
  
        particle.x += particle.velocityX;
        particle.y += particle.velocityY;
  
        if (particle.x > canvas.value.width || particle.x < 0) {
          particle.velocityX = -particle.velocityX;
        }
        if (particle.y > canvas.value.height || particle.y < 0) {
          particle.velocityY = -particle.velocityY;
        }
      });
  
      requestAnimationFrame(draw);
    }
  
    draw();
  
    window.addEventListener('resize', () => {
      canvas.value.width = window.innerWidth;
      canvas.value.height = window.innerHeight;
    });
  
    onUnmounted(() => {
      window.removeEventListener('resize', () => {});
    });
  });
  </script>
  
  <style scoped>
  .bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none; /* 防止遮挡其他交互元素 */
  }
  </style>